<template>
  <div>
    <div>
      <el-table :data="emps" border stripe size="mini">
        <el-table-column type="selection" align="left" width="55"></el-table-column>
        <el-table-column prop="name" label="姓名" fixed width="120" align="left"></el-table-column>
        <el-table-column prop="workID" label="工号" width="120" align="left"></el-table-column>
        <el-table-column prop="email" label="电子邮件" width="200" align="left"></el-table-column>
        <el-table-column prop="phone" label="电话号码" width="120" align="left"></el-table-column>
        <el-table-column prop="department.name" label="所属部门" width="120" align="left"></el-table-column>
        <el-table-column label="所属部门" align="center">
          <template slot-scope="scope">
            <el-tooltip placement="right" v-if="scope.row.salary">
              <div slot="content">
                <table>
                  <tr>
                    <td>基本工资</td>
                    <td>{{scope.row.salary.basicsalary}}</td>
                  </tr>
                  <tr>
                    <td>交通补助</td>
                    <td>{{scope.row.salary.trafficsalary}}</td>
                  </tr>
                  <tr>
                    <td>午餐补助</td>
                    <td>{{scope.row.salary.lunchsalary}}</td>
                  </tr>
                  <tr>
                    <td>奖金</td>
                    <td>{{scope.row.salary.bonus}}</td>
                  </tr>
                  <tr>
                    <td>养老金比率</td>
                    <td>{{scope.row.salary.pensionper}}</td>
                  </tr>
                  <tr>
                    <td>养老金基数</td>
                    <td>{{scope.row.salary.pensionbase}}</td>
                  </tr>
                  <tr>
                    <td>医疗保险比率</td>
                    <td>{{scope.row.salary.medicalper}}</td>
                  </tr>
                  <tr>
                    <td>医疗保险基数</td>
                    <td>{{scope.row.salary.medicalbase}}</td>
                  </tr>
                  <tr>
                    <td>公积金比率</td>
                    <td>{{scope.row.salary.accumulationfundper}}</td>
                  </tr>
                  <tr>
                    <td>公积金基数</td>
                    <td>{{scope.row.salary.accumulationfundbase}}</td>
                  </tr>
                  <tr>
                    <td>启用时间</td>
                    <td>{{scope.row.salary.createdate}}</td>
                  </tr>
                </table>
              </div>
              <el-tag>{{scope.row.salary.name}}</el-tag>
            </el-tooltip>
            <el-tag v-else>暂未设置</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-popover
                placement="left"
                title="修改工资账套"
                @show="showPop(scope.row.salary)"
                @hide="hidePop(scope.row)"
                width="200"
                trigger="click">
              <div>
                <el-select v-model="currentSalary" placeholder="请选择" size="mini">
                  <el-option
                      v-for="item in salaries"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </div>
              <el-button slot="reference" type="danger">修改工资账套</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
            background
            @size-change="sizeChange"
            @current-change="currentChange"
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            :total="total">
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<script>
import {getRequest} from "../../utils/api";
import {putRequest} from "../../utils/api";


export default {
  name: "SalSobCfg",
  data(){
    return{
      emps:[],
      total:0,
      currentPage: 1,
      currentSize: 10,
      salaries:[],
      currentSalary:null,

    }
  },
  methods:{
    showPop(data){
      if(data){
        this.currentSalary = data.id;
      }else{
        this.currentSalary = null;
      }
    },
    hidePop(data){
      if(this.currentSalary){
        putRequest("/salary/sobcfg/?eid="+data.id+'&sid='+this.currentSalary).then(res=>{
          if(res){
            this.initEmps();
          }
        })
      }
    },
    initEmps(){
      getRequest("/salary/sobcfg/?page="+this.currentPage+'&size='+this.currentSize).then(res=>{
        if(res){
          this.emps = res.data;
          this.total = res.total;
        }
      })
    },
    initSalaries(){
      getRequest("/salary/sobcfg/salaries").then(res=>{
        if (res){
          this.salaries = res;
        }
      })
    },
    sizeChange(size){
      this.currentSize = size;
      this.initEmps();
    },
    currentChange(page){
      this.currentPage = page;
      this.initEmps();
    },
  },
  mounted() {
    this.initEmps();
    this.initSalaries();
  }
}
</script>

<style scoped>

</style>